<template>
  <div class="relative h-[75vh] rounded-xl overflow-hidden border-2 border-primary">
    <div class="absolute inset-0 bg-gray-100 flex items-center justify-center">
      <!-- <Icon name="mdi:vr" size="64" class="text-primary opacity-30" />
      <p class="mt-4 text-primary font-bold">虚拟展厅加载中...</p> -->
      <iframe src="https://p2.yiyiny.com/shpere-client/#/?id=6" class="w-full h-full"
        allowfullscreenameborder="0"></iframe>
    </div>

    <!-- <div class="absolute bottom-6 right-6 flex gap-3">
      <button @click="toggleVR" class="bg-primary text-white p-3 rounded-full hover:bg-primary-dark transition-colors">
        <Icon :name="vrEnabled ? 'mdi:vr-off' : 'mdi:vr'" size="24" />
      </button>
      <button @click="toggleAudio" class="bg-white text-primary p-3 rounded-full hover:bg-neutral transition-colors">
        <Icon :name="audioEnabled ? 'mdi:volume-high' : 'mdi:volume-off'" size="24" />
      </button>
    </div> -->

    <div class="absolute top-6 left-6 bg-white/80 p-4 rounded-lg backdrop-blur-sm">
      <h3 class="font-display text-xl text-primary">「{{ exhibitionTitle }}」虚拟展</h3>
      <p class="text-sm mt-1">{{ visitorCount }}人正在参观</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const vrEnabled = ref(false)
const audioEnabled = ref(true)
const exhibitionTitle = '当代水墨的传承与创新'
const visitorCount = 142

const toggleVR = () => {
  vrEnabled.value = !vrEnabled.value
  // 实际项目中将连接VR设备
}

const toggleAudio = () => {
  audioEnabled.value = !audioEnabled.value
}
</script>